﻿$(document).ready(function() {
    var trigers = { D: "default", N: "narrow", L: "large" };
    var toggleSwitcher = function(event) {
        if (!$(event.target).is('button')) {
            $('#switcher button').toggleClass('hidden');
        }
    };
    var setBodyClass = function(className) {
        $('body').removeClass().addClass(className);
        $('#switcher button').removeClass('selected');
        $('#switcher-' + className).addClass('selected');
        $('#switcher').off('click', toggleSwitcher);
        if (className == 'default') {
            $('#switcher').on('click', toggleSwitcher);
        }
    };

    $('#switcher').click(function(event) {
        if ($(event.target).is('button')) {
            setBodyClass(event.target.id.split('-')[1]);
        }
    });

    $('#switcher').on('click', toggleSwitcher);

    $('#switcher').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });

    $('#switcher-default').addClass('selected');
    $('#switcher').click();

    $(document).keyup(function(event) {
        var key = String.fromCharCode(event.keyCode);
        if (key in trigers) {
            setBodyClass(trigers[key]);
        }
    });
});
    //允许多个元素响应单击事件的一种策略叫做事件捕获①。在事件捕获的过程中，事件首先会交给最外层的元素，接着再交给更具体的元素

    /*** 课后练习3.8   *************************/
$(document).ready(function () {

    //1.在Charles Dickens被单击时，给它应用selected样式。
    //$('#position').wrap('<span class="highlighted"></span>');

    $('div .author').click(function() {
        var html = $('div .author').html().replace("Charles Dickens", "<span class='highlighted'>Charles Dickens</span>");
        $('div .author').html(html);
    });

    //2.在双击章标题（<h3 class="chapter-title">）时，切换章文本的可见性
    $('h3[class="chapter-title"]').dblclick(function (event) {
        $('#chapter-1').toggle();
    });

    //3.当用户按下向右方向键时，切换到下一个body类；右方向键的键码是39
    var i = 1;
    var classList = ["default", "narrow", "large"];

    $(document).keyup(function (event) {
        if (event.keyCode === 39) {
            if (i > 3) i = 1;
            $('body').removeClass().addClass(classList[(3 + i) % 3]);
            $('#switcher button').removeClass('selected');
            $('#switcher-' + classList[(3 + i) % 3]).addClass('selected');
            i++;
        }
    });
    //4.挑战：使用console.log()函数记录在段落中移动的鼠标的坐标位置。（注意：console.log()可以在Firefox的firebug扩展、Safari的Web Inspector或Chrome、IE中的Developer Tools中使用。）
    $('#chapter-1').mousemove(function (event) {
        console.log("x:" + event.pageX + " , y:" + event.pageY);
    });
    //5.挑战：使用.mousedown()和.mouseup()跟踪页面中的鼠标事件。如果鼠标按键在按下它的地方被释放，则为所有段落添加hidden类。如果是在按下它的地方之下被释放的，删除所有段落的hidden类。
    var downX = 0;
    var downY = 0;

    $(document).mousedown(function (event) {
        downX = event.pageX; // 记录鼠标按下的横坐标
        downY = event.pageY; // 记录鼠标按下的纵坐标
    });

    $(document).mouseup(function (event) {
        if (event.pageY > downY) {//下方释放
            $('p').removeClass('hidden');
        }
        else if (event.pageX == downX && event.pageY == downY) {
            $('p').addClass('hidden');
        }
        downY = event.pageY;
    });

    $(document).mousemove(function (event) {
        $('#position').html("X:" + event.pageX + " ,Y:" + event.pageY);
    });
});
